<template>
	<div v-if="getMenuFixed" :style="getHiddenDomStyle"></div>
	<Sider
		ref="sideRef"
		breakpoint="lg"
		collapsible
		:class="getSiderClass"
		:width="getMenuWidth"
		:collapsed="getCollapsed"
		:collapsedWidth="getCollapsedWidth"
		:theme="getMenuTheme"
		@breakpoint="onBreakpointChange"
		:trigger="getTrigger"
		v-bind="getTriggerAttr"
	>
		<template #trigger v-if="getShowTrigger">
			<LayoutTrigger />
		</template>
		<LayoutMenu :theme="getMenuTheme" />
		<DragBar ref="dragBarRef" />
	</Sider>
</template>
<script lang="ts">
import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';

import { Layout } from 'ant-design-vue';
import LayoutMenu from '../menu/index.vue';
import LayoutTrigger from '../trigger/index.vue';

import { useMenuSetting } from '@/hooks/setting/useMenuSetting';
import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
import { useDesign } from '@/hooks/web/useDesign';

import DragBar from './DragBar.vue';
export default defineComponent({
	name: 'LayoutSideBar',
	components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
	setup() {
		const dragBarRef = ref<ElRef>(null);
		const sideRef = ref<ElRef>(null);

		const { getCollapsed, getMenuWidth, getMenuTheme, getRealWidth, getMenuFixed, getIsMixMode, toggleCollapsed } =
			useMenuSetting();

		const { prefixCls } = useDesign('layout-sideBar');

		const { getTriggerAttr, getShowTrigger } = useTrigger();

		useDragLine(sideRef, dragBarRef);

		const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();

		const getSiderClass = computed(() => {
			return [
				prefixCls,
				{
					[`${prefixCls}--fixed`]: unref(getMenuFixed),
					[`${prefixCls}--mix`]: unref(getIsMixMode),
				},
			];
		});

		const getHiddenDomStyle = computed((): CSSProperties => {
			const width = `${unref(getRealWidth)}px`;
			return {
				width: width,
				overflow: 'hidden',
				flex: `0 0 ${width}`,
				maxWidth: width,
				minWidth: width,
				transition: 'all 0.2s',
			};
		});

		// 在此处使用计算量可能会导致sider异常
		// andv 更新后，如果trigger插槽可用，则此处代码可废弃
		const getTrigger = h(LayoutTrigger);

		return {
			prefixCls,
			sideRef,
			dragBarRef,
			getHiddenDomStyle,
			getSiderClass,
			getTrigger,
			getTriggerAttr,
			getCollapsedWidth,
			getMenuFixed,
			getMenuWidth,
			getCollapsed,
			getMenuTheme,
			onBreakpointChange,
			getShowTrigger,
			toggleCollapsed,
		};
	},
});
</script>
<style lang="less">
@prefix-cls: ~'@{namespace}-layout-sideBar';

.@{prefix-cls} {
	z-index: @layout-sider-fixed-z-index;

	&--fixed {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
	}

	&--mix {
		top: @header-height;
		height: calc(100% - @header-height);
	}

	&.ant-layout-sider-dark {
		background-color: @sider-dark-bg-color;

		.ant-layout-sider-trigger {
			color: darken(@white, 25%);
			background-color: @trigger-dark-bg-color;

			&:hover {
				color: @white;
				background-color: @trigger-dark-hover-bg-color;
			}
		}
	}

	&:not(.ant-layout-sider-dark) {
		// box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);

		.ant-layout-sider-trigger {
			color: @text-color-base;
			border-top: 1px solid @border-color-light;
		}
	}

	.ant-layout-sider-zero-width-trigger {
		top: 40%;
		z-index: 10;
	}

	& .ant-layout-sider-trigger {
		height: 36px;
		line-height: 36px;
	}
}
</style>
